import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Toast} from '@ant-design/react-native';
import {getParkingDataInfo, judgeParkingState} from '~/api/parking';
import Parkpublics from '~/components/process/parkpublics';
import Processimg from '~/components/process/processimg';
import BuyType from '~/components/process/buytype';
import Getgift from '~/components/process/getgift';
import Getmoney from '~/components/process/getmoney';
import Getcar from '~/components/process/getcar';
import Getpark from '~/components/process/getpark';
import {initParkOrder, saveParkOrder} from '~/store/parkorder';
import {connect} from 'react-redux';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
        parkorder: state.parkorder,
    };
};
const mapSetter = (dispatch) => {
    return {
        onSave: (data) => {
            dispatch(saveParkOrder(data));
        },
        initParkOrder: () => {
            dispatch(initParkOrder());
        },
    };
};
class Process extends Component {
    static navigationOptions = {
        title: '',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            title: '购买车位',
            parkstate: '',
            parkingtype: this.props.parkorder.parktype,
            parkingid: this.props.parkorder.parkingid,
            packageid: '',
            packagename: '',
        };
        this.getparkstate();
        if (this.state.parkingtype === 5) {
            this.props.navigation.replace('Confirm');
        }
    }
    getparkstate() {
        judgeParkingState(this.props.parkorder.parkingid).then((r) => {
            if (r.code === 0) {
            } else {
                Toast.info(r.msg);
                this.props.navigation.push('ChangePark');
            }
        });
    }
    buymoney = () => {
        if (this.props.parkorder.parkingplanitem.PackageState === 1) {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 0,
                payfull: 1,
                parktype: 1,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        } else if (this.props.parkorder.parkingplanitem.CoinState === 1) {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 0,
                payfull: 1,
                parktype: 2,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        } else if (this.props.parkorder.parkingplanitem.CarState === 1) {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 0,
                payfull: 1,
                parktype: 3,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        } else {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 0,
                payfull: 1,
                parktype: 4,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        }
    };
    buyfinancial = () => {
        if (this.props.parkorder.parkingplanitem.PackageState === 1) {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 1,
                payfull: 0,
                parktype: 1,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        } else if (this.props.parkorder.parkingplanitem.CoinState === 1) {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 1,
                payfull: 0,
                parktype: 2,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        } else if (this.props.parkorder.parkingplanitem.CarState === 1) {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 1,
                payfull: 0,
                parktype: 3,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        } else {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                payloan: 1,
                payfull: 0,
                parktype: 4,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        }
    };
    ComfirePackage = () => {
        if (this.state.packageid == undefined || this.state.packageid == 0) {
            Toast.info('请选择套餐');
        } else {
            if (this.props.parkorder.parkingplanitem.CoinState === 1) {
                this.props.onSave({
                    parkid: this.state.parkingid,
                    parkplanid: this.props.parkorder.parkingplanid,
                    packageid: this.state.packageid,
                    packagename: this.state.packagename,
                    packagestate: 1,
                    parktype: 2,
                });
                this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
            } else if (this.props.parkorder.parkingplanitem.CarState === 1) {
                this.props.onSave({
                    parkid: this.state.parkingid,
                    parkplanid: this.props.parkorder.parkingplanid,
                    packageid: this.state.packageid,
                    packagename: this.state.packagename,
                    packagestate: 1,
                    parktype: 3,
                });
                this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
            } else {
                this.props.onSave({
                    parkid: this.state.parkingid,
                    parkplanid: this.props.parkorder.parkingplanid,
                    packageid: this.state.packageid,
                    packagename: this.state.packagename,
                    packagestate: 1,
                    parktype: 4,
                });
                this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
            }
        }
    };
    ComfireMoney = () => {
        if (this.props.parkorder.parkingplanitem.CarState === 1) {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                coinstate: 1,
                parktype: 3,
            });
            this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
        } else {
            this.props.onSave({
                parkid: this.state.parkingid,
                parkplanid: this.props.parkorder.parkingplanid,
                coinstate: 1,
                parktype: 4,
            });
            this.props.navigation.push('Process', {parkingid: this.state.parkingid});
        }
    };
    ComfireCar = () => {
        this.props.onSave({
            parkid: this.state.parkingid,
            parkplanid: this.props.parkorder.parkingplanid,
            carstate: 1,
            parktype: 4,
        });
        this.props.navigation.replace('Process', {parkingid: this.state.parkingid});
    };
    ComfirePark = () => {
        this.props.onSave({
            parkid: this.state.parkingid,
            parkplanid: this.props.parkorder.parkingplanid,
            parkstata: 1,
            parktype: 5,
        });
        this.props.navigation.replace('Confirm', {parkingid: this.state.parkingid});
    };
    render() {
        const onpress = () => {
            this.props.initParkOrder();
            this.props.navigation.push('ParkInfo', {
                params: this.state.parkingid,
            });
        };
        return (
            <View style={{width: '100%', height: '100%'}}>
                <ScrollView>
                    <View style={{width: '100%'}}>
                        <Processimg processtype={this.props.parkorder.parktype} parkingplanitem={this.props.parkorder.parkingplanitem} />
                        <Parkpublics parkinginfo={this.props.parkorder.parkinginfo} />
                    </View>
                    <View style={{width: '100%'}}>
                        {this.state.parkingtype === 0 && (
                            <BuyType
                                parkingid={this.props.parkorder.parkingid}
                                planID={this.props.parkorder.parkingplanid}
                                navigation={this.props.navigation}
                            />
                        )}
                        {this.state.parkingtype === 1 && (
                            <Getgift
                                onChange={(id, name) => {
                                    this.setState({
                                        packageid: id,
                                        packagename: name,
                                    });
                                }}
                                parkingid={this.props.parkorder.parkingid}
                                parkingitemid={this.props.parkorder.parkingplanitemid}
                                navigation={this.props.navigation}
                            />
                        )}
                        {this.state.parkingtype === 2 && <Getmoney parkingid={this.props.parkorder.parkingid} navigation={this.props.navigation} />}
                        {this.state.parkingtype === 3 && <Getcar parkingid={this.props.parkorder.parkingid} navigation={this.props.navigation} />}
                        {this.state.parkingtype === 4 && (
                            <Getpark
                                parkingid={this.state.parkingid}
                                parkinfo={this.props.parkorder.parkinginfo}
                                navigation={this.props.navigation}
                            />
                        )}
                    </View>
                </ScrollView>
                {this.state.parkingtype === 0 && (
                    <Flex direction={'column'} justify={'end'} align={'end'} style={{width: '100%'}}>
                        <Text onPress={this.buymoney} style={styles.paymoney}>
                            全款
                        </Text>
                        {this.props.parkorder.parkingplanitem.PayLoan === 1 && (
                            <Text onPress={this.buyfinancial} style={styles.payLoan}>
                                0首付
                            </Text>
                        )}
                    </Flex>
                )}
                {this.state.parkingtype === 1 && (
                    <Flex justify={'end'} align={'end'}>
                        <Text onPress={this.ComfirePackage} style={styles.comfirmpackage}>
                            套餐确认
                        </Text>
                    </Flex>
                )}
                {this.state.parkingtype === 2 && (
                    <Flex style={{width: '100%', height: 40}} justify={'end'} align={'end'}>
                        <Text onPress={this.ComfireMoney} style={styles.comfirecoin}>
                            下一步
                        </Text>
                    </Flex>
                )}
                {this.state.parkingtype === 3 && (
                    <Flex style={{width: '100%', height: 40}} justify={'end'} align={'end'}>
                        <Text onPress={this.ComfireCar} style={styles.comfirecar}>
                            下一步
                        </Text>
                    </Flex>
                )}
                {this.state.parkingtype === 4 && (
                    <Flex style={{width: '100%', height: 40}} justify={'end'} align={'end'}>
                        <Text onPress={this.ComfirePark} style={styles.comfirepark}>
                            下一步
                        </Text>
                    </Flex>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    paymoney: {
        width: '92%',
        marginLeft: '4%',
        marginRight: '4%',
        borderRadius: 5,
        overflow: 'hidden',
        height: 40,
        color: '#FFFFFF',
        fontSize: 15,
        backgroundColor: '#E94F4F',
        textAlign: 'center',
        paddingTop: 10,
    },
    payLoan: {
        width: '92%',
        marginLeft: '4%',
        marginRight: '4%',
        marginTop: 10,
        borderRadius: 5,
        height: 40,
        color: '#FFFFFF',
        fontSize: 15,
        backgroundColor: '#EBA35A',
        textAlign: 'center',
        paddingTop: 10,
    },
    comfirmpackage: {
        color: 'white',
        fontSize: 20,
        textAlign: 'center',
        backgroundColor: '#EC4F46',
        height: 40,
        borderRadius: 5,
        paddingTop: 7,
        width: '100%',
    },
    comfirecoin: {
        width: '100%',
        height: 40,
        color: '#FFFFFF',
        fontSize: 15,
        backgroundColor: '#ec4f46',
        textAlign: 'center',
        paddingTop: 10,
    },
    comfirecar: {
        width: '100%',
        height: 49,
        color: '#FFFFFF',
        fontSize: 15,
        backgroundColor: '#ec4f46',
        textAlign: 'center',
        paddingTop: 15,
    },
    comfirepark: {
        width: '100%',
        height: 40,
        color: '#FFFFFF',
        fontSize: 15,
        backgroundColor: '#ec4f46',
        textAlign: 'center',
        paddingTop: 10,
    },
});
export default connect(mapGetter, mapSetter)(Process);
